<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
    <meta charset="utf-8">
    <title>${title}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="<spring:message code="news.keywords" />">
    <meta name="description" content="<spring:message code="news.keywords" />">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../static/plugin/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/common.css?VERSION=0.01">
    <link rel="stylesheet" href="../static/css/news.css?VERSION=0.01">
</head>
<style>
    .wrapper .text-title {
        font-size: 22px;
        font-family:SimSun;
        font-weight: bold;
        color: #000;
        text-align: center;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        white-space: normal;
    }
    .wrapper .content-info {
        display: inline-block;
        width: 40%;
        margin: 10px 0 0 0;
        font-size: 13px;
        text-align: center;
        color: #5c6b72;
    }
    .case-content .list-bottom{
        margin-top: 30px;
    }
    .list-bottom .bottom-others{
        border: 1px solid #626262;
        padding:13px;
    }
    .list-bottom .bottom-about{
        margin-top: 40px;
    }
    .bottom-about .about-title{
        background-color: #eeeded;
        padding:5px 13px;
        margin-bottom: 10px;
    }
    .bottom-about .about-link{
        display: inline-block;
        width: 49%;
    }
    .about-link ul li{
        height: 25px;
        line-height: 25px;
        vertical-align: middle;

    }
    .about-link ul li a{
        color:#555;
    }
    .about-link ul li a:hover{
        color: #f2c41f;
    }
    .about-link em{
        margin-right: 4px;
    }
    .list-bottom .bottom-others .a1{
        color: #555;
    }
    .list-bottom .bottom-others .a1:hover{
        color: #f2c41f;
    }

    .list-bottom .bottom-others .back{
        background-color: #f2c41f;
        color: #fff;
        padding:5px 10px;
        margin-top: -37px;
    }
</style>
<body>

<!--导航条-->
<jsp:include page="../include/index_header.jsp"></jsp:include>

<div class="bg-content">
</div>

<div class="wrapper" id="app">
    <div class="content">
        <div class="left">
            <div class="zSidebar lf">
                <div class="sidebarA">
                    <h2>资讯中心</h2>
                    <ul>
                        <li <c:if test="${news.newsType == 1}">class="active"</c:if>><a href="/news/dryCargoNews.html" title="干货资讯">干货资讯<em class="glyphicon glyphicon-menu-right fr"></em></a></li>
                        <li <c:if test="${news.newsType == 2}">class="active"</c:if>><a href="/news/industryNews.html" title="行业资讯">行业资讯<em class="glyphicon glyphicon-menu-right fr"></em></a></li>
                        <li <c:if test="${news.newsType == 3}">class="active"</c:if>><a href="/news.html" title="公司新闻">公司新闻 <em class="glyphicon glyphicon-menu-right fr"></em></a></li>
                    </ul>
                </div>
                <div class="sidebarD">
                    <h2>推荐文章</h2>
                    <ul>
                        <c:forEach var="hotNews" items="${hotNewsList}">
                            <li>
                                <a href="/news/${hotNews.id}.html">
                                    <img src="${hotNews.thumbnailUrl}" alt="news" class="lf"/>
                                    <div class="news-title fr">
                                        <c:if test="${hotNews.title.length() > 15}"><p>${hotNews.title.substring(0,15)}...</p></c:if>
                                        <c:if test="${hotNews.title.length() < 16}"><p>${hotNews.title}</p></c:if>
                                        <p style="margin-top: 10px;color:#c5c5c5; "> ${hotNews.created.substring(0,10)}</p>
                                    </div>
                                </a>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
                <div class="sidebarC" style="clear: both;content: '';">
                    <h2>最新文章</h2>
                    <ul style="padding:0;">
                        <c:forEach var="newNews" items="${newNewsList}">
                            <li><a class="eps tr" href="/news/${newNews.id}.html"><em class="glyphicon glyphicon-share-alt"></em>${newNews.title}</a></li>
                        </c:forEach>
                    </ul>
                </div>
                <div class="sidebarB">
                    <h2>联系我们</h2>
                    <div class="box">
                        <p><strong>深圳菠萝三维网络有限公司</strong><br />
                            固话：0755-86549840<br />
                            手机：13622391669<br />
                            邮箱：info@pineprint.com<br />
                            地址：广东省深圳市南山区<br />
                            &nbsp;&nbsp;清华信息港综合楼7楼 </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="right">
            <div class="case-content">
                <div class="list-header">
                    <div class="list-header-nav">
                    <span>
                        <c:if test="${news.newsType == 1}">干货资讯</c:if>
                        <c:if test="${news.newsType == 2}">行业资讯</c:if>
                        <c:if test="${news.newsType == 3}">公司新闻</c:if>
                    </span>
                    </div>
                    <div class="search text-right">
                        <span> 当前位置: </span>
                        <a href=""> 首页 > </a>
                        <a href=""> 资讯中心 > </a>
                        <span>
                            <c:if test="${news.newsType == 1}">干货资讯</c:if>
                            <c:if test="${news.newsType == 2}">行业资讯</c:if>
                            <c:if test="${news.newsType == 3}">公司新闻</c:if>
                        </span>
                    </div>
                </div>
                <div class="list-middle">
                    <div class="text-title" style="white-space: normal;">${news.title}</div>
                    <div class="content-info" style="text-align: right;">
                        文章来源：深圳菠萝三维网络有限公司
                    </div>
                    <div class="content-info" style="width: 20%;">
                        人气：${news.viewCount}
                    </div>
                    <div class="content-info" style="text-align: left;">
                        发表时间：${news.created.substring(0,10)}
                    </div>
                    <div class="text-content" style="padding-right: 15px;">
                        <p>${news.content}</p>
                    </div>
                </div>
                <div class="list-bottom">
                    <div id="bottom-others" class="bottom-others">
                        <p style="margin-bottom: 5px;">上一篇:
                            <c:if test="${empty frontNews}"  class="a1"> 没有更多了...</c:if>
                            <c:if test="${!empty frontNews}"><a href="/news/${frontNews.id}.html" title="${frontNews.title}" class="a1"> ${frontNews.title}</a></c:if></a></p>
                        <p>下一篇:
                            <c:if test="${empty backNews}"  class="a1"> 没有更多了...</c:if>
                            <c:if test="${!empty backNews}"><a href="/news/${backNews.id}.html" title="${backNews.title}"  class="a1"> ${backNews.title}</a></c:if></a></p>
                        <c:if test="${news.newsType == 3}"><a href="/news.html" class="back fr">返回列表</a></c:if>
                        <c:if test="${news.newsType == 1}"><a href="/news/dryCargoNews.html" class="back fr">返回列表</a></c:if>
                        <c:if test="${news.newsType == 2}"><a href="/news/industryNews.html" class="back fr">返回列表</a></c:if>
                    </div>
                    <div class="bottom-about">
                        <div class="about-title"><em class="glyphicon glyphicon-send" style="color: #f2c41f;margin-right: 3px;"></em> 相关资讯</div>
                        <div class="about-link lf" style="padding-right: 10px;">
                            <ul>
                                <li v-for="(news,index) in correlationNews" v-if="index < 5">
                                    <a :href="'/news/'+news.id+'.html'" class="a1">
                                        <em class="glyphicon glyphicon-heart-empty"></em>{{news.title.substring(0,23)}}<span class="fr">{{news.created.substring(0,10)}}</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="about-link fr" style="padding-left: 10px;">
                            <ul>
                                <li v-for="(news,index) in correlationNews" v-if="index > 5">
                                    <a  :href="'/news/'+news.id+'.html'" class="a1">
                                        <em class="glyphicon glyphicon-heart-empty"></em>{{news.title.substring(0,23)}}<span class="fr">{{news.created.substring(0,10)}}</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<jsp:include page="../include/index_footer.jsp"></jsp:include>

<script>
    $.ajax({
        url: "/view_count",
        type: "GET",
        dataType: "JSONP",
        async:false,
        data: {_: Math.random(),"type":"newsViewCount","id":${news.id}},
        success: function(data) {}
    });
</script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data () {
            return {
                correlationNews : []
            }
        },
        mounted : function(){
            this.$nextTick(function(){
                var self = this;
                axios.get("/news/newsKeyword?key=${news.newsKeyword}",{
                }).then(function(response){
                    self.correlationNews = response.data.records;
                        console.log(response.data.records);
                    });
            });
        }
    });
</script>
</body>
</html>
